<template>
  <div class="content">
    <div class="personal_head" v-if="showHead">
      <div class="personal_img">
        <img :src="headImg">
      </div>
      <div class="personal_text">
        <h4>{{nickName}}</h4>
      </div>
    </div>
    <div class="personal_content">
      <div class="personal_list mt10" @click="$router.push({path: '/userLogin'})">
        <img src="../../assets/img/lipinla_icon.png">
        礼品卡
        <i class="iconfont icon arrow-left"></i>
        <div class="hr_bottom"></div>
      </div>
      <div class="personal_list" @click="$router.push({path: '/userChangeInfo'})">
        <img src="../../assets/img/yuyueziliao_icon.png">
        预约资料
        <i class="iconfont icon arrow-left"></i>
      </div>
      <div class="personal_list mt10" @click="$router.push({path: '/userLogin'})">
        <img src="../../assets/img/youhuiquan_icon.png">
        我的优惠
        <i class="iconfont icon arrow-left"></i>
        <div class="hr_bottom"></div>
      </div>
      <div class="personal_list" @click="$router.push({path: '/userLogin'})">
        <img src="../../assets/img/yaoqing_icon.png">
        至美传递
        <i class="iconfont icon arrow-left"></i>
      </div>
      <div class="personal_list mt10" @click="$router.push({path: '/userChangePw'})">
        <img src="../../assets/img/xiugai_icon.png">
        修改密码
        <i class="iconfont icon arrow-left"></i>
        <div class="hr_bottom"></div>
      </div>
      <div class="personal_list" @click="$router.push({path: '/userSuggest'})">
        <img src="../../assets/img/yijianjianyi_icon.png">
        意见反馈
        <i class="iconfont icon arrow-left"></i>
      </div>
      <div class="personal_list mt10" @click="$router.push({path: '/userProtocol'})">
        <img src="../../assets/img/xieyi_icon.png">
        预约协议
        <i class="iconfont icon arrow-left"></i>
        <div class="hr_bottom"></div>
      </div>
    </div>

    <TarBar index="4"/>
  </div>
</template>

<script>
  import {getInfo} from '@/api/userLogin'
  import TarBar from '@/components/TarBar'

  export default {
    data() {
      return {
        openId: '',
        userId: '',
        nickName: '',
        headImg: '',
        showHead: false,
        height: 'auto'
      }
    },
    components: {
      TarBar
    },
    mounted() {
      let that = this
      this.openId = localStorage.getItem("openId")
      this.userId = localStorage.getItem("token")
      getInfo(this.userId).then((res) => {
        this.nickName = res.nickName
        this.headImg = res.headImg
        this.showHead = true
      })
    },
    methods: {}
  }
</script>

<style scoped>
  @import "../../assets/css/iconfont.css";
  @import "../../assets/css/login_selfcenter.css";
  @import "../../assets/css/index_appointment.css";
  @import "../../assets/css/reset.css";
</style>
